<template>
    <div :class="[active?'tag-button active':'tag-button']">
        <span>{{title}}</span>
        <a-icon v-if="canClose" type="close-circle" @click.native.stop="closeMenuTags" style="color: red" />
    </div>
</template>

<script>
  export default {
    name: "MenuTag",
    props: {
      title:{
        type:String,
        default:''
      },
      path:{
        type:String,
        default:''
      },
      active:{
        type: Boolean,
        default: false
      },
      canClose:{
        type: Boolean,
        default: true
      },
    },
    computed:{
      payload(){
        return {
            title:this.title,
              path:this.path,
              canClose:this.canClose,
        }
      },
    },
    methods:{
      closeMenuTags(){
        // console.log('删除标签',this.payload)
        this.$store.commit('menu/closeMenuTags',this.payload)
      }
    }
  }
</script>

<style lang="stylus" scoped>

    $active = {
        color: #001529,
        background-color: #e6f7ff
    }

    .tag-button
        cursor pointer
        display inline-block
        padding 10px
        border 1px solid #7dbcea
        &:hover
            {$active}
    .active
        {$active}
    .unactive
        background-color #ffffff
</style>